<template>
    <div class="body">
        <div class="container">
            <div class="confirm-order">
                <div class="section section-order">
                    <div class="order-info clearfix">
                        <div class="fl">
                            <h2 class="title" v-if="isOutTime">{{ orderInfo.status == 0 ? "订单已超时" : "已完成" }}</h2>
                            <h2 class="title" v-else>待付款～</h2>
                            <p class="order-time">
                                <span v-if="orderInfo.status == 2">
                                    请在
                                    <span class="pay-time-tip">0 小时 {{ minutes }} 分</span>
                                    <span>内完成支付, 超时后将取消订单</span>
                                </span>
                            </p>
                        </div>
                    </div>
                    <i class="iconfont icon-right"></i>
                </div>
            </div>

            <div class="cart-container">
                <div class="cart-wrapper">
                    <div class="cart-goods-list">
                        <h3>商品列表</h3>
                        <div class="list-body">
                            <list-item v-for="(item,index) in orderInfo.goodsList" :key="item.goodsId" :goodInfo="item"></list-item>
                        </div>
                    </div>

                    <div class="count-detail clearfix">
                        <div class="section-bill">
                            <div class="bill-item">
                                <div class="bill-name">商品件数：</div>
                                <div class="bill-money">{{totalNums}}件</div>
                            </div>
                            <div class="bill-item">
                                <div class="bill-name">商品优惠：</div>
                                <div class="bill-money">0.00元</div>
                            </div>
                            <div class="bill-item total-price">
                                <div class="bill-name">应付总额：</div>
                                <div class="bill-money">
                                    <span class="big-nums">{{ Number(orderInfo.totalPrice).toFixed(2) }}</span>
                                    <a>元</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="confirm-pay" v-if="orderInfo.status == 2">
                <div class="section section-payment">
                    <div class="cash-title">
                        <div>选择以下支付方式付款</div>
                    </div>
                    <div class="payment-box">
                        <div class="payment-header clearfix">
                            <h3 class="title">支付工具</h3>
                            <span class="desc"></span>
                        </div>
                        <div class="payment-body">
                            <ul class="clearfix payment-list J_paymentList">
                                <li @click="openMsgBox" alt="weixin_native" type="weixin_native" class="J_bank">
                                    <img data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cdfb179cdce8f95c57e8d82c469d20c.png" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cdfb179cdce8f95c57e8d82c469d20c.png" lazy="loaded" />
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import ListItem from "@/pages/OrderDetail/ListItem";
import QRCode from "qrcode";
import { reqUserOrderList } from "@/api";
export default {
    data() {
        return {
            orderInfo: {},
            timer: 0,
            minutes: 0,
            isOutTime: false,
        };
    },
    mounted() {
        let result = Promise.resolve(this.getData());
        result.then(this.getMinutes);
        result.then(this.getisOutTime);
        this.timer = setInterval(() => {
            if (this.minutes > 0) {
                this.minutes--;
            } else {
                this.isOutTime = true;
                this.getData();
                clearInterval(this.timer);
            }
        }, 1000 * 60);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        async getData() {
            let params = {
                keyword: this.orderId.toString(),
                pageNo: 1,
                pageSize: 10000,
            };
            let result = await reqUserOrderList(params);
            if (result.code == 200) {
                console.log(result);
                this.orderInfo = result.data.orderList.find((item) => {
                    return item.orderId == this.orderId;
                });
            } else {
                this.$message.error("获取订单详情数据失败！");
            }
            return "ok";
        },
        // 支付订单
        async payOrder() {
            return await Promise.resolve(
                this.$store.dispatch("pay/payOrder", this.orderId)
            );
        },
        async openMsgBox() {
            if (this.isOutTime) {
                this.$message.info("订单已超时");
                this.$router.replace("/home");
                return;
            }
            // 获取二维码的路径
            let url = await QRCode.toDataURL(
                "wxp://f2f1IZY-mr3-VuTs839ag_97WX7dfe4IrYOZbYy3Fevgpcq8dQMQUbBtUZ5dy-BzecGN"
            );
            // 通过msgbox生成二维码
            this.$msgbox
                .alert(`<img src="${url}" alt="">`, "扫码支付", {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: true,
                    confirmButtonText: "我已支付",
                    cancelButtonText: "取消",
                    showClose: false,
                    center: true,
                    beforeClose: (action, instance, done) => {
                        if (action === "confirm") {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = "查询中...";

                            Promise.resolve(this.payOrder()).then(() => {
                                done();
                                instance.confirmButtonLoading = false;
                                this.$message({
                                    message: "付款成功",
                                    type: "success",
                                });
                                this.$router.replace({
                                    path: "/paysuccess",
                                });
                            });
                        } else {
                            instance.confirmButtonLoading = false;
                            done();
                        }
                    },
                })
                .catch((action) => {
                    this.$message.info("用户取消支付");
                });
        },
        getMinutes() {
            if (!this.isOutTime) {
                let time = 1800000 - (Date.now() - this.orderInfo.payTime);
                var date = new Date(time);
                var mm = date.getMinutes();
                this.minutes = mm;
            }
        },
        getisOutTime() {
            this.isOutTime = Date.now() - this.orderInfo.payTime > 1800000;
        },
    },
    computed: {
        orderId() {
            return this.$route.query.orderId;
        },
        goodsList() {
            return this.orderInfo.goodsList || [];
        },
        totalNums() {
            let initValue = 0;
            return this.goodsList.reduce((preViousValue, currentValue) => {
                return preViousValue + currentValue.number;
            }, initValue);
        },
    },
    components: {
        ListItem,
    },
};
</script>

<style lang="less" scoped>
.body {
    width: 100%;
    padding: 38px 0 160px;
    box-sizing: border-box;
    min-height: 100vh;

    a {
        text-decoration: none;
    }
    .container {
        width: 1200px;
        margin: 0 auto;

        .cart-container {
            margin-top: 30px;
            .cart-wrapper {
                background-color: white;
                padding-top: 48px;
                .cart-goods-list {
                    padding: 0 24px;
                    h3 {
                        font-size: 18px;
                    }
                    .list-body {
                        border-bottom: 1px solid rgb(224, 224, 224);

                        .list-item {
                            .item-box {
                                padding: 15px 0;
                                .col {
                                    line-height: 80px;
                                    height: 80px;
                                    font-size: 16px;
                                }

                                .col-name {
                                    font-size: 14px;
                                }

                                .col-total {
                                    color: #ff6700;
                                }
                            }
                        }
                    }

                    .col {
                        white-space: nowrap;
                        color: #424242;
                        float: left;
                    }

                    .col-img {
                        img {
                            width: 40px;
                            height: 40px;
                            vertical-align: middle;
                        }
                    }
                    .col-name {
                        width: 600px;
                        padding-left: 10px;
                    }

                    .col-price {
                        width: 360px;
                        text-align: center;
                    }

                    .col-total {
                        width: 120px;
                        text-align: center;
                    }
                }

                .count-detail {
                    padding: 20px 48px;

                    .section-bill {
                        float: right;

                        .bill-item {
                            div {
                                float: left;
                                height: 28px;
                                line-height: 28px;
                                text-align: right;
                                font-size: 14px;
                                white-space: nowrap;
                            }
                            .bill-name {
                                width: 126px;
                                color: #757575;
                            }

                            .bill-money {
                                width: 105px;
                                color: #ff6700;
                            }
                        }

                        .total-price {
                            height: 40px;
                            font-size: 14px;
                            div {
                                margin-top: 12px;
                                height: 28px;
                                line-height: 28px;
                                text-align: right;
                                white-space: nowrap;
                            }

                            .bill-money {
                                margin-top: 0;
                                height: 40px;
                                .big-nums {
                                    font-size: 30px;
                                    height: 40px;
                                    line-height: 40px;
                                    text-align: right;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }

                .cart-bar {
                    border-top: 2px solid rgb(224, 224, 224);
                    background-color: white;
                    padding: 20px 48px;
                    height: 40px;
                    line-height: 40px;

                    .section-right {
                        float: right;
                        white-space: nowrap;
                        a {
                            float: left;
                            height: 38px;
                            width: 158px;
                            margin-left: 50px;
                            font-size: 18px;
                            text-align: center;
                            transition: all 0.3s;
                        }
                        .go-primary {
                            color: white;
                            background-color: rgb(255, 103, 0);
                            border: 1px solid rgb(255, 103, 0);
                        }

                        .back-shopcart {
                            color: #b0b0b0;
                            border: 1px solid #b0b0b0;
                        }

                        .go-primary:hover {
                            background-color: rgb(242, 88, 7);
                        }
                    }
                }
            }
        }

        .confirm-pay {
            width: 1200px;
            background-color: #fff;
            margin: 30px auto;
            color: #333;

            .section-payment {
                -webkit-text-size-adjust: 100%;
                font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
                    Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
                padding: 30px 48px;
                margin-bottom: 30px;
                background-color: #fff;
                color: #424242;

                .cash-title {
                    height: 50px;
                    margin-bottom: 30px;
                    border-bottom: 1px solid #e0e0e0;
                    font-size: 18px;
                }

                .payment-box {
                    color: #424242;
                    margin-bottom: 30px;

                    .payment-header {
                        color: #424242;
                        margin-bottom: 15px;
                    }

                    .payment-body {
                        color: #424242;

                        ul {
                            color: #424242;
                            padding: 0;
                            overflow: hidden;
                            list-style: none;

                            li {
                                float: left;
                                width: 174px;
                                height: 60px;
                                margin-bottom: 14px;
                                border: 1px solid #e0e0e0;
                                text-align: center;
                                cursor: pointer;
                                overflow: hidden;
                                transition: all 0.4s;
                            }
                        }
                    }
                }
            }
        }

        .confirm-order {
            width: 1200px;
            background-color: #fff;
            margin: 0 auto;

            .section {
                padding: 30px 48px;
                padding-left: 183px;
                position: relative;

                .order-info {
                    color: #424242;
                    padding: 20px 0;

                    .fl {
                        color: #424242;
                        float: left;

                        h2 {
                            color: #424242;
                            margin: 0;
                            padding: 0;
                            margin-bottom: 10px;
                            font-size: 24px;
                            font-weight: 400;
                            line-height: 36px;
                        }

                        p {
                            margin: 0;
                            padding: 0;
                            color: #616161;
                            margin-bottom: 5px;
                            line-height: 2;

                            span {
                                color: #616161;
                                line-height: 2;

                                span {
                                    color: #616161;
                                    line-height: 2;
                                }
                                .pay-time-tip {
                                    line-height: 2;
                                    margin: 0 5px;
                                    color: #ff6700;
                                }
                            }
                        }
                    }

                    .fr {
                        color: #424242;
                        float: right;
                        text-align: right;

                        .total {
                            text-align: right;
                            margin-bottom: 30px;
                            color: #757575;

                            span {
                                text-align: right;
                                color: #ff6700;
                                font-size: 14px;
                                em {
                                    text-align: right;
                                    color: #ff6700;
                                    font-size: 24px;
                                }
                            }
                        }

                        .show-detail {
                            text-align: right;
                            background-color: rgba(0, 0, 0, 0);
                            color: #757575;
                            text-decoration: none;
                            cursor: pointer;
                        }

                        .show-detail:hover {
                            color: #ff6700;
                        }
                    }
                }
                .icon-right {
                    font-family: iconfont !important;
                    width: 80px;
                    height: 80px;
                    position: absolute;
                    top: 40px;
                    left: 50px;
                    font-size: 80px;
                    color: #83c44e;
                    text-align: center;
                    border: 2px solid #83c44e;
                    border-radius: 50%;
                }
                .order-detail {
                    color: #424242;
                    overflow: hidden;
                    transition: height 0.3s;

                    ul {
                        -webkit-text-size-adjust: 100%;
                        font: 14px/1.5 Helvetica Neue, Helvetica, Arial,
                            Microsoft Yahei, Hiragino Sans GB, Heiti SC,
                            WenQuanYi Micro Hei, sans-serif;
                        color: #424242;
                        list-style: none;
                        padding: 20px 0 0 0;
                        margin-top: 10px;
                        border-top: 1px solid #e0e0e0;

                        li {
                            margin: 0;
                            padding: 0;
                            list-style: none;
                            line-height: 24px;
                            margin-bottom: 8px;
                            color: #333;

                            .label {
                                list-style: none;
                                line-height: 24px;
                                color: #333;
                                float: left;
                                width: 85px;
                            }

                            .content {
                                list-style: none;
                                line-height: 24px;
                                color: #333;
                                float: left;
                            }

                            .order-num {
                                -webkit-text-size-adjust: 100%;
                                font: 14px/1.5 Helvetica Neue, Helvetica, Arial,
                                    Microsoft Yahei, Hiragino Sans GB, Heiti SC,
                                    WenQuanYi Micro Hei, sans-serif;
                                list-style: none;
                                line-height: 24px;
                                color: #ff6700;
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>